<template>
  <div id="Hilo">
    <div class="container-fluid" style="height:inherit;">
      <!-- 头部 S -->
      <div class="row head-con align-items-center">
        <div class="col-md-3 col-6">
          <div class="row justify-content-end" style="padding-top:15px">
            <div class="col-2">
              <i class="fa fa-question"></i>
            </div>
            <div class="col-2">
              <i class="fa fa-volume-down fa-lg"></i>
              <i class="fa fa-volume-off fa-lg" v-show="false"></i>
            </div>
            <!-- <div class="col-2">
              <i class="fa fa-toggle-on fa-lg"></i>
              <i class="fa fa-toggle-off fa-3x" v-show="false"></i>
            </div>-->
          </div>
        </div>
        <!-- 计时 S -->
        <div class="col-md-5 col-6" style="padding-top:15px">
          <div class="count-down-box">
            <div class="run-down"></div>
            <span class="text">GOOD LUCK!</span>
          </div>
        </div>
        <!-- 计时 E -->
        <!-- 历史记录  S-->
        <div class="col-md-4 col-12">
          <div class="his-result row">
            <div class="col-md-11">
              <div class="justify-content-center row">
                <div class="card blac k">9</div>
                <div class="card red">Q</div>
                <div class="card black">K</div>
                <div class="card red">5</div>
                <div class="card black">9</div>
                <div class="card red">Q</div>
                <div class="card black">K</div>
                <div class="card red">5</div>
                <div class="card black">K</div>
                <div class="card red">5</div>
              </div>
            </div>
            <div class="col-md-1 align-self-center">
              <i class="fa fa-history fa-lg"></i>
            </div>
          </div>
        </div>
        <!-- 历史记录  E-->
      </div>
      <!-- 头部 E -->
      <!-- center S -->
      <div class="row">
        <!-- 博彩区 S -->
        <div class="col-md-8">
          <div class="row game-lf-box">
            <!-- 下注区 S -->
            <div class="col-md-4">
              <div class="game-lf-con">
                <div class="hilo_btn flex-space-between">
                  <div>
                    <div class="top">0</div>
                    <div class="bottom">16%</div>
                  </div>
                  <div class="mid-info">
                    <h4>您好</h4>
                    <p>K-A</p>
                  </div>
                  <div>
                    <div class="top">0</div>
                    <div class="bottom">6.00x</div>
                  </div>
                </div>
                <div class="hilo_user_bet">
                  <div class="from-con">
                    <h6 class="tit">Your bet</h6>
                    <input type="text" class="input">
                    <span class="clear">CLEAR</span>
                  </div>
                  <div class="bet-btn-con">
                    <span class="btn btn-dark">+1K</span>
                    <span class="btn btn-dark">+10K</span>
                    <span class="btn btn-dark">1/2</span>
                    <span class="btn btn-dark">X2</span>
                  </div>
                </div>
                <div class="hilo_btn flex-space-between lo-bet">
                  <div>
                    <div class="top">0</div>
                    <div class="bottom">16%</div>
                  </div>
                  <div class="mid-info">
                    <h4>您好</h4>
                    <p>K-A</p>
                  </div>
                  <div>
                    <div class="top">0</div>
                    <div class="bottom">6.00x</div>
                  </div>
                </div>
              </div>
            </div>
            <!-- 下注区 E -->
            <div class="col-md-4">动画区</div>
            <!-- 下注类型 S -->
            <div class="col-md-4">
              <div class="hilo_btn small_btn flex-space-between red-btn">
                <div>
                  <div class="top"></div>
                  <div class="bottom">16%</div>
                </div>
                <div class="mid-info">
                  <p>红色</p>
                </div>
                <div>
                  <div class="top">0</div>
                  <div class="bottom">6.00x</div>
                </div>
              </div>
              <div class="hilo_btn small_btn flex-space-between black-btn">
                <div>
                  <div class="top"></div>
                  <div class="bottom">16%</div>
                </div>
                <div class="mid-info">
                  <p>黑色</p>
                </div>
                <div>
                  <div class="top">0</div>
                  <div class="bottom">6.00x</div>
                </div>
              </div>
              <div class="hilo_btn small_btn flex-space-between">
                <div>
                  <div class="top"></div>
                  <div class="bottom">16%</div>
                </div>
                <div class="mid-info">
                  <p>2-9</p>
                </div>
                <div>
                  <div class="top">0</div>
                  <div class="bottom">6.00x</div>
                </div>
              </div>
              <div class="hilo_btn small_btn flex-space-between">
                <div>
                  <div class="top"></div>
                  <div class="bottom">16%</div>
                </div>
                <div class="mid-info">
                  <p>J,K,Q,A</p>
                </div>
                <div>
                  <div class="top">0</div>
                  <div class="bottom">6.00x</div>
                </div>
              </div>
              <div class="row">
                <div class="col-6">
                  <div class="hilo_btn small_btn flex-space-between">
                    <div>
                      <div class="top"></div>
                      <div class="bottom">16%</div>
                    </div>
                    <div class="mid-info">
                      <p>K,A</p>
                    </div>
                    <div>
                      <div class="top">0</div>
                      <div class="bottom">6.00x</div>
                    </div>
                  </div>
                </div>
                <div class="col-6">
                  <div class="hilo_btn small_btn flex-space-between">
                    <div>
                      <div class="top"></div>
                      <div class="bottom">16%</div>
                    </div>
                    <div class="mid-info">
                      <p>A</p>
                    </div>
                    <div>
                      <div class="top">0</div>
                      <div class="bottom">6.00x</div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="hilo_btn small_btn flex-space-between joker-btn">
                <div>
                  <div class="top"></div>
                  <div class="bottom">16%</div>
                </div>
                <div class="mid-info">
                  <p>小王</p>
                </div>
                <div>
                  <div class="top">0</div>
                  <div class="bottom">6.00x</div>
                </div>
              </div>
            </div>
            <!-- 下注类型 E -->
          </div>
          <!-- 历史结果概率 S -->
          <div class="row">
            <div class="col-10">
              <div class="hos-card-box">
                <div class="card-li">
                  <h4 class="tit">3x</h4>
                  <div class="card-info">
                    <div class="card_txt">1</div>
                    <span class="card_val"></span>
                  </div>
                </div>
                <div class="card-li">
                  <h4 class="tit">3x</h4>
                  <div class="card-info">
                    <div class="card_txt">1</div>
                    <span class="card_val"></span>
                  </div>
                </div>
                <div class="card-li">
                  <h4 class="tit">3x</h4>
                  <div class="card-info">
                    <div class="card_txt">1</div>
                    <span class="card_val"></span>
                  </div>
                </div>
                <div class="card-li">
                  <h4 class="tit">3x</h4>
                  <div class="card-info">
                    <div class="card_txt">1</div>
                    <span class="card_val"></span>
                  </div>
                </div>
                <div class="card-li">
                  <h4 class="tit">3x</h4>
                  <div class="card-info">
                    <div class="card_txt">1</div>
                    <span class="card_val"></span>
                  </div>
                </div>
                <div class="card-li">
                  <h4 class="tit">3x</h4>
                  <div class="card-info">
                    <div class="card_txt">1</div>
                    <span class="card_val"></span>
                  </div>
                </div>
                <div class="card-li">
                  <h4 class="tit">3x</h4>
                  <div class="card-info">
                    <div class="card_txt">1</div>
                    <span class="card_val"></span>
                  </div>
                </div>
                <div class="card-li">
                  <h4 class="tit">3x</h4>
                  <div class="card-info">
                    <div class="card_txt">1</div>
                    <span class="card_val"></span>
                  </div>
                </div>
                <div class="card-li">
                  <h4 class="tit">3x</h4>
                  <div class="card-info">
                    <div class="card_txt">1</div>
                    <span class="card_val"></span>
                  </div>
                </div>
                <div class="card-li">
                  <h4 class="tit">3x</h4>
                  <div class="card-info">
                    <div class="card_txt">1</div>
                    <span class="card_val"></span>
                  </div>
                </div>
                <div class="card-li">
                  <h4 class="tit">3x</h4>
                  <div class="card-info">
                    <div class="card_txt">1</div>
                    <span class="card_val"></span>
                  </div>
                </div>
                <div class="card-li">
                  <h4 class="tit">3x</h4>
                  <div class="card-info">
                    <div class="card_txt">1</div>
                    <span class="card_val"></span>
                  </div>
                </div>
                <div class="card-li">
                  <h4 class="tit">3x</h4>
                  <div class="card-info">
                    <div class="card_txt">1</div>
                    <span class="card_val"></span>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-2" style="margin-top:15px">
              <div class="row" style="    margin-right: -15px;
    margin-left: -15px;">
                <div class="dropdown" style="    width: 100%;">
                  <button
                    class="btn btn-secondary dropdown-toggle"
                    type="button"
                    style="    width: 100%;"
                    id="dropdownMenuButton"
                    data-toggle="dropdown"
                    data-offset="0,0"
                    aria-haspopup="true"
                    aria-expanded="false"
                  >Dropdown button</button>
                  <div
                    class="dropdown-menu dropdown-menu-right"
                    aria-labelledby="dropdownMenuButton"
                  >
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <a class="dropdown-item" href="#">Something else here</a>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-12 btn btn-danger">52%</div>
                <div class="col-12 btn btn-dark">38%</div>
              </div>
            </div>
          </div>
          <!-- 历史结果概率 E -->
        </div>
        <!-- 博彩区 E -->
        <!-- 结算区 S -->
        <div class="col-md-4">
          <div class="settleAccounts">
            <div class="row">
              <div class="col-12">5</div>
              <div class="col-12">
                <div class="row">
                  <div class="col-6">用户名</div>
                  <div class="col-2">下注</div>
                  <div class="col-2">金币</div>
                  <div class="col-2">利润</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 结算区 E -->
      </div>
      <!-- center E -->
    </div>
  </div>
</template>
<script>
export default {};
</script>
<style>
#Hilo {
  height: -webkit-fill-available;
  background: #232c31;
  color: #fff;
}
.head-con {
  padding: 0 20px;
  line-height: 34px;
  color: #adbec5;
  font-size: 15px;
}
.svg-inline--fa:hover {
  color: #607d8b;
}
.his-result {
  padding-top: 15px;
}
.count-down-box {
  position: relative;
  background: #141a1d;
  height: 34px;
  line-height: 34px;
  border-radius: 7.2px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.count-down-box .run-down {
  position: absolute;
  top: 0;
  left: 0;
  right: 20%;
  bottom: 0;
  background: #0ee07b;
  box-shadow: 0 10px 10px rgba(14, 224, 123, 0.8);
  z-index: 1;
}
.count-down-box .text {
  position: relative;
  z-index: 10;
  color: #fff;
}
.card {
  width: calc(10% - 8px);
  height: 70px;
  line-height: 70px;
  font-size: 32px;
  font-family: roboto, arial, san-serif;
  margin-left: 8px;
  font-weight: bold;
}
/* 博彩区 */
.game-lf-box {
  padding: 20px 25px;
  min-height: 350px;
  background-image: url("");
  background-repeat: repeat;
  border-radius: 6px;
  margin-top: 15px;
}
.game-lf-con {
}
.hilo_btn {
  width: 100%;
  border-radius: 8px;
  padding: 15px 10px;
  /* min-height: 85px; */
  position: relative;
  line-height: 1;
  overflow: hidden;
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#b2c3ca),
    color-stop(40%, #b2c3ca),
    color-stop(40%, #adbec6),
    to(#adbec6)
  );
  background: linear-gradient(
    to bottom,
    #b2c3ca 0%,
    #b2c3ca 40%,
    #adbec6 40%,
    #adbec6 100%
  );
  color: #607d8b;
}
.small_btn {
  padding: 4px 10px;
  margin-bottom: 10px;
}
.small_btn div {
  color: #222c31;
}
.small_btn .mid-info {
  line-height: 30px;
  color: #222c31;
  font-weight: bold;
}
.lo-bet {
  background: linear-gradient(
    to bottom,
    #6d8794 0%,
    #6d8794 40%,
    #607d8b 40%,
    #607d8b 100%
  );
  color: #d5dee2;
}
.hilo_btn .mid-info {
  color: #222c31;
}
.lo-bet .mid-info {
  color: #d5dee2;
}
.hilo_btn .mid-info p {
  padding-top: 0;
  margin-bottom: 0;
  font-size: 16px;
}
.hilo_btn .top {
  height: 16px;
  font-size: 18px;
  margin-bottom: 20px;
}
.hilo_btn .bottom {
  font-size: 14px;
  margin-top: 15px;
}
.hilo_user_bet {
  margin: 15px 0;
}
.from-con {
  position: relative;
  padding-top: 20px;
  margin: 10px 0;
}
.from-con .tit {
  color: #4c7d7f;
  font-size: 12px;
  text-align: left;
  position: absolute;
  left: 10px;
  top: 5px;
}
.from-con .input {
  border: none;
  width: 100%;
  border-bottom: 2px solid #607d8b;
  background: rgba(0, 0, 0, 0);
  line-height: 40px;
  padding: 0 10px;
  font-size: 16px;
  color: #adbec6;
}
.from-con .clear {
  position: absolute;
  right: 10px;
  bottom: 2px;
  line-height: 40px;
  color: #5b7784;
}
.bet-btn-con {
  overflow: hidden;
}
.bet-btn-con .btn {
  float: left;
  width: calc(50% - 10px);
  margin: 5px;
  font-size: 14px;
  padding: 4px 10px;
  background: #adbec6;
  color: #000;
}
.bet-btn-con .btn-dark {
}
.red-btn {
  background: #ff5a5a;
  color: #fff;
  font-family: roboto, arial, san-serif;
}
.red-btn div,
.red-btn .mid-info p {
  color: #fff;
}
.black-btn {
  background: #000;
  color: #fff;
  font-family: roboto, arial, san-serif;
}
.black-btn div,
.black-btn .mid-info p {
  color: #fff;
}
.joker-btn {
  background: #0ee07b;
  color: #000;
  font-family: roboto, arial, san-serif;
}
.joker-btn p {
  color: #000;
}
.hos-card-box {
  border-radius: 8px;
  background: linear-gradient(44.72deg, #2f3e45 0%, #3d5059 100%);
  box-shadow: 0 0 10px 0 #141a1d;
  padding: 20px;
  text-align: center;
  margin-top: 15px;
  overflow: hidden;
}
.hos-card-box .card-li {
  width: calc(7.692% - 5px);
  float: left;
}
.hos-card-box .tit {
  font-size: 12px;
  text-align: left;
  padding-left: 12px;
}
.hos-card-box .card-info {
  position: relative;
  height: 55px;
}
.hos-card-box .card_txt {
  height: inherit;
  background: #fff;
  border-radius: 3px;
  color: #000;
  line-height: 55px;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  font-size: 14px;
  max-width: 32px;
  width: 32px;
}
.hos-card-box .card_val {
  position: absolute;
  right: 8px;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #0ee07b;
  border-radius: 10px;
}
.btn-group {
  margin-top: 20px;
}
</style>
